<template>
    <div class="regPage">
        <!-- pc端显示：hidden-sm-and-down -->
        <div class="bannerVue_2 hidden-sm-and-down mg0">
            <div class="banner_inner mg0  flex-column align-center">
                <div class="flex-center">
                    <img src="../assets/logo.png" style="width: 100px; height: 100px;">
                    <span style="color: #FF3B61; font-size: 80px; padding-left: 20px;">衣勾选</span>
                </div>
                <div style="color: #1D2129; font-weight: 600; padding: 80px 0; font-size: 58px;">您的空中试衣间～</div>
                <div class="content"> 衣勾选是集潮流购物、AI试衣、同城配送、分享社区于一体的智能化服饰平台，涵盖女装、男装、童装、老年装等全品类服饰。同城39分钟送货上门，免费试穿，满意再付款。AI试衣技术实时预览上身效果，告别退货烦恼。穿搭分享社区汇聚时尚达人，获取搭配灵感。厂家源头商品平价来袭，平台直营店铺售后保障。衣勾选，一站式搭配购物新体验!</div>
            </div>
        </div>
        <!-- 移动端显示：hidden-md-and-up -->
        <div class="bannerVue_1 flex-column align-center hidden-md-and-up">
            <img src="../assets/logo.png" style="width: 40px; height: 40px;">
            <div style="color: #1D2129; font-weight: 600; padding: 15px 0; font-size: 16px;">您的空中试衣间～</div>
            <div class="content">衣勾选是集潮流购物、AI试衣、同城配送、分享社区于一体的智能化服饰平台，涵盖女装、男装、童装、老年装等全品类服饰。同城39分钟送货上门，免费试穿，满意再付款。</div>
            <div class="content">AI试衣技术实时预览上身效果，告别退货烦恼。穿搭分享社区汇聚时尚达人，获取搭配灵感。厂家源头商品平价来袭，平台直营店铺售后保障。衣勾选，一站式搭配购物新体验!</div>
        </div>

        <div class="inpBox mg30" v-if="isDone">
            <div class="flex-center flex-column align-center mg10">
                <img src="../assets/invite_1.png" style="width: 166px; height: 120px; margin-bottom: 10px;">
                <span style="color: #1d2129; font-size: 20px;">恭喜你助力成功！</span>
            </div>
            <div class="flex-center flex-column align-center mg30">
                <div style="font-size: 28px; font-weight: 600; color: #350102; padding-bottom: 10px;"> 赠送<span style="color: #FF3142">新用户</span>配送券一张</div>
                <span style="font-size: 28px; font-weight: 600; color: #350102;">下载APP立即领取！</span>
            </div>
            <div class="btn mg30" @click="jump">下载衣勾选APP</div>
        </div>

        <div class="inpBox mg30" v-else>
            <div class="flex-center align-center">
                <img :src="info.avatar" style="width: 40px; height: 40px; border-radius: 50%;">
                <span style="color: #1D2129; font-size: 16px; padding-left: 5px; font-weight: 600;">{{ info.nickname }}</span>
            </div>
            <div class="flex-center flex-column align-center mg10">
                <span style="color: #1D2129; font-size: 20px; font-weight: 600;">{{ info.phone }}</span>
                <img src="../assets/invite.png" class="invite">
            </div>
            <div class="inpVue flex align-center mg20">
                <input type="number" placeholder="请输入手机号码" v-model="mobile">
            </div>
            <div class="inpVue flex align-center mg20">
                <input type="number" placeholder="请输入验证码" v-model="code">
                <span style="color: #FF3142; font-weight: 600; font-size: 14px;" @click="getStatus">{{ text }}</span>
            </div>
            <div class="btn mg30" @click="regFun">立即注册</div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            mobile: "",
            code: "",
            isDone: false,
            text: "获取验证码",
            timer: null,
            isSend: false,
            info: {},
            inviteCode: "",
        }
    },
    created(){
        let link = window.location.href
        let sp = link.split('?');
        let herf = sp[sp.length - 1];
        let params = new URLSearchParams(herf)
        this.inviteCode = params.get('code') || ""
        console.log(this.code)
        this.init()
    },

    methods: {
        init(){
            this.$get(`/api/front/invite-user/code/info?code=${this.inviteCode}`, {}).then(res=>{
                if(res.data.code==200) {
                    console.log(res)
                    this.info = res.data.data
                    console.log("邀请人信息",  this.info)
                }
            })
        },

        getStatus(){
            if(!this.mobile) return this.$message("请输入手机号")
            this.$post("/api/front/invite-user/mobile/is_register", {
                phone: this.mobile
            }).then(res=>{
                if(res.data.code==200) {
                    if(res.data.data) return this.$message("该账号已注册")
                    this.sendCode()
                } else{
                    this.$message(res.data.message)
                }
            })
        },

        regFun(){
            if(!this.mobile) return this.$message("请输入手机号")
            if(!this.code) return this.$message("请输入验证码")
            this.$post("/api/front/invite-user/mobile/register", {
                phone: this.mobile,
                spreadPid: this.info.id,
                captcha: this.code
            }).then(res=>{
                console.log(res)
                if(res.data.code===200) {
                    this.$message.success("注册成功")
                    this.code = ""
                    this.mobile = ""
                    this.isDone = true
                }else{
                    this.$message(res.data.message)
                }
            })
        },

        sendCode(){
            if(!this.mobile) return this.$message("请输入手机号")
            this.$post("/api/front/login/send/code", {
                phone: this.mobile
            }).then(res=>{
                console.log(res)
                if(res.data.code===200) {
                    this.$message.success("发送成功")
                    let count = 60
                    this.text = count + 's'
                    this.timer = setInterval(() => {
                        count--
                        this.text = count + 's'
                        if(count===0) {
                            clearInterval(this.timer)
                            this.timer = null
                            this.text = "获取验证码"
                        }
                    }, 1000);
                }
            })
        },
        jump(){
            this.$router.push({name: "Home"})
        }
    }
}
</script>


<style lang="less">
    .inpBox {
        width: 100%;
        padding-bottom: 50px;
        .invite {
            width: 300px;
            margin-top: 20px;
        }
        .inpVue {
            width: 300px;
            height: 60px;
            border-bottom: 1px solid #E5E6EB;
            input {
                flex: 1;
                height: 60px;
            }
        }
        .btn {
            width: 300px;
            height: 50px;
            border-radius: 24px;
            background: #FF3142;
            line-height: 50px;
            text-align: center;
            color: #fff;
        }
    }
    
    .bannerVue_1 {
        width: 100%;
        background: url("../assets//banner_1.png") no-repeat;
        background-size: 100% 100%;
        padding:  68px 18px 68px;
        .content {
            color: #4E5969;
            line-height: 1.6;
            text-indent: 2em;
         }
    }
  
    .bannerVue_2 {
            width: 100%;
            height: 1024px;
            background: url("../assets//banner_1.png") no-repeat;
            background-size: 100% 100%;
            .banner_inner {
                width: 1300px;
                height: 1024px;
                padding: 200px 0px 0;
                .content {
                    color: #4E5969;
                    line-height: 1.6;
                    text-indent: 2em;
                    font-size: 40px;
                }
            }
    }
</style>